<script type="text/javascript">
 $(function(){ 
	var $panel = $.CurrentNavtab;
	var $t     = $('#typetreeid');
	var op     = $t.data();
	//添加删除按钮INIT
	var add    = op.addHoverDom ? null : 'edit';
	var remove = op.removeHoverDom ? null : 'edit';
	var onremove = op.onRemove ? '' : 'M_NodeRemove';
	$t.data('addHoverDom', add).data('removeHoverDom', remove).data("onRemove",onremove);
	//拖动INIT
	var edit   = op.editEnable ? true : true,
        bDrag  = op.beforeDrag ? '' : 'M_BeforeNodeDrag',
        bDrop  = op.beforeDrop ? '' : 'M_BeforeNodeDrop',
        onDrop = op.onDrop ? '' : 'M_NodeDrop';
            
    $t.data('editEnable', edit).data('beforeDrag', bDrag).data('beforeDrop', bDrop).data('onDrop', onDrop);
}); 
//单击事件
function ZtreeClick(event, treeId, treeNode) {
	if (treeNode.id==-1) {//根节点不能被编辑
		return false;
	}
    var $detail = $('#ttreedetailid');
    var $detaidrole = $('#treedetailtypeid');
    
    
	if (treeNode.text) {
		$('#btext').val(treeNode.text);
	}else{
		$('#btext').val('');
	}
	if (treeNode.id) {
		$('#tid').val(treeNode.id);
	} else {
		$('#tid').val('');
	}
    $detail.show();
    
    $detaidrole.show();
    if(treeNode.id == null||treeNode.id==""){
    	$('#ztreedetaildeptgrid').html("");
    }else{
    	$('#typetreeid').bjuiajax('doLoad', {url:"${ctx}/user/userFromType?typeId="+treeNode.id, target:"#ztreedetailtypegrid"})
    }
}
//保存属性
function M_Ts_Type() {
	var zTree  = $.fn.zTree.getZTreeObj("typetreeid");
	var text   = $('#btext').val();
	var id	 = $('#tid').val();
	if ($.trim(text).length == 0) {
		alertMsg.error('类型名称不能为空！');
		return;
	}
	var upNode = zTree.getSelectedNodes()[0];
	
	if (!upNode) {
		alertMsg.error('未选中任何类型！');
        return;
	}
	upNode.text   = text;
	upNode.name   = text;
	upNode.id 	= id;
	$.ajax({
		url: "${ctx}/type/save",
		type: "POST",
		data:$('#type_form').serialize(),
		success: function(data) {
			if (data.success){
				upNode.pid 	= '-1';
				upNode.id = data.obj.id;
				zTree.updateNode(upNode);		
			}else{
				
			}
		}
	});
	return false;
}
//监听拖拽事件
function M_BeforeNodeDrag(treeId, treeNodes) {
    return true
}
function M_BeforeNodeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
    /*禁止插入层级为2的节点*/
    if (moveType == 'inner' && targetNode.level == 3) {
    	$("#typetreeid").alertmsg('info', '拖拽失败。原因：目录菜单只能有4层！');
        return false
    }
    /*禁止插入剩余层级不足的子节点*/
    if (moveType == 'inner' && treeNodes[0].isParent) {
        var molevel = 3 - targetNode.level //剩余层级
        var maxlevel = 2
        var zTree = $.fn.zTree.getZTreeObj("ztree1")
        var nodes = zTree.transformToArray(treeNodes)
        var level = nodes[0].level
        
        for (var i = 1; i < nodes.length; i++) {
            if (nodes[i].level == (level + 1)) {
                maxlevel++
                level++
            }
        }
        if (maxlevel > molevel) {
        	$("#typetreeid").alertmsg('info', '拖拽失败。原因：目录菜单只能有3层！');
            return false
        }
    }
    return true
}
//拖拽结束事件
function M_NodeDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
    
}
//删除结束事件
var menudeleteids = [];
function M_NodeRemove(event, treeId, treeNode) {
	if(treeNode.id!=null&&treeNode.id!=""){
		$.ajax({
			url: "${ctx}/type/remove",
			type: "POST",
			data:{
				id:treeNode.id
			},
			success: function(data) {
				if (data.success){
					menudeleteids.push(treeNode.id);
				}else{
					
				}
			}
		});		
	}
}
</script>
<div class="bjui-pageContent">
    <!-- <div class="pageFormContent" data-layout-h="0"> -->
        <div style="float:left; margin:5px 5px 0; width:300px;">
            <fieldset  style="top:15px;bottom:0px;overflow:auto;position: absolute;">
                <legend>树型菜单</legend>
                <div class="clearfix">
                    <div style="float:left; width:300px; height:457px; overflow:auto;">
                        <ul id="typetreeid" class="ztree" data-toggle="ztree" data-max-add-level="1" data-expand-all="true" data-expand-level="2" data-on-click="ZtreeClick">
                            <!-- <li data-id="1" data-pid="0">表单元素</li>
                            <li data-id="10" data-pid="1" data-url="form-button.html" data-tabid="form-button">按钮</li> -->
                            <li data-id="-1" data-faicon="university">档案类型</li>
                            <%
                               for (type in types){
                            %>
                            	<li data-id="${type.id!}" data-pid="-1" data-text="${type.text!}">${type.text!}</li>
                            <%
                               }
                            %>
                        </ul>
                    </div>
                </div>
            </fieldset>
        </div>
        <!-- 明细编辑START -->
        <div id="ttreedetailid" style="display:none; margin-left:330px; margin-top:5px; margin-right:5px;height:90px;">
        	<fieldset>
            <!-- <div class="bs-example" data-content="详细信息"> -->
            <legend>类型详细信息</legend>
            <form action="${ctx}/type/save" id="type_form" method="post">
                <div class="form-group">
                    <input type="hidden" id="tid" name="btype.id" value=""/>
                	<label for="text" class="control-label x85">类型名称：</label>
                    <input type="text" class="form-control validate[required] required" value="" name="btype.text" id="btext" size="30" placeholder="" />
                    <button type="button" class="btn btn-green" onclick="M_Ts_Type();">确认保存</button>
                </div>
                </form>
                <!-- <div class="form-group" style="padding-top:8px; border-top:1px #DDD solid;">
                    <label class="control-label x85"></label>
                    
                </div> -->
            <!-- </div> -->
            </fieldset>
        </div>
        <!-- 明细编辑END -->
        <!-- 角色权限START -->
        <div id="treedetailtypeid" style="display:none; margin-left:330px;">
        	<fieldset style="top:120px;bottom:0px;left:340px;right:15px;overflow:auto;position: absolute;">
            <!-- <div class="bs-example" data-content="详细信息"> -->
            <legend>关联用户</legend>
            	<div id="ztreedetailtypegrid" class="bjui-layout" style="width:100%;height:95%;overflow:auto;">
            	
                </div>
            </fieldset>
        </div>
        <!-- 角色权限END -->
    <!-- </div> -->
</div>